/* 
    Document   : pullrefresh
    Created on : 02-Dec-2013, 08:52:41
    Author     : VU TUAN
    Description:
        Purpose of the stylesheet follows.
*/


/**
 *
 * Pull down styles
 *
*/
[id*="pullDown"], [id*="pullUp"] {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 13px;
    color: #003366;
    text-align: left;
}
[id*="pullDown"] div, [id*="pullUp"] div{
    display: inline-block;
    margin-left: 8px;
}
[id*="pullDown"] .pullDownIcon, [id*="pullUp"] .pullUpIcon  {
    display:block; float:left;
    width:40px; height:40px;
    background:url('../images/pull-icon@2x.png') 0 0 no-repeat;
    -webkit-background-size:40px 80px; 
    background-size:40px 80px;
    -webkit-transition-property:-webkit-transform;
    -webkit-transition-duration:250ms;	
}
[id*="pullDown"] .pullDownIcon {
    -webkit-transform:rotate(0deg) translateZ(0);
}
[id*="pullUp"] .pullUpIcon  {
    -webkit-transform:rotate(-180deg) translateZ(0);
}

[id*="pullDown"].flip .pullDownIcon {
    -webkit-transform:rotate(-180deg) translateZ(0);
}

[id*="pullDown"].flip .pullUpIcon {
    -webkit-transform:rotate(0deg) translateZ(0);
}

[id*="pullDown"].loading .pullDownIcon, [id*="pullUp"].loading .pullUpIcon {
    background-position:0 100%;
    -webkit-transform:rotate(0deg) translateZ(0);
    -webkit-transition-duration:0ms;
    
    -webkit-animation-name:loading;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    margin-right: 4px;
}

@-webkit-keyframes loading {
    from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}
